<template>
  <div id="app">
    <router-view :key="key"></router-view>
  </div>
</template>

<script>
import sysHeader from '@/components/common/sysHeader.vue'
export default {
  name: 'App',
  components: {
    sysHeader
  },
  computed:{
    key(){
      return this.$router.path+Math.random()
    }
  },
 
}
</script>

<style>
  body{
    padding:0;
    margin:0;
    overflow: auto;
  }
  body  /deep/ .el-popover{
  background: rgba(50, 63, 98,1);
  border: 1px solid #1b9eea;
  padding:0;
}
body /deep/  .el-popper[x-placement^=top] .popper__arrow{
  border-top-color:#1b9eea;
}
.el-popper[x-placement^=top] .popper__arrow::after{
  border-top-color:#1b9eea;
}
#app {
  position:relative;
  width:1920px;
  height:1080px;
  background: #030D24;
}

div{
  box-sizing: border-box;
}
ul{
  padding: 0;
  box-sizing: border-box;
}
ul li{
  list-style: none;
}
  .common_head{
    height:40px;
    position:relative;
    background-image: url('~@/assets/images/common_head_d_c.png');
    background-repeat: repeat;
    background-size:74px 40px;
    background-position: 0 0;
    display: inline-block;
    float:left;
  }
  .common_head_bg_r{
    height:40px;
    width:20px;
    position:absolute;
    right:-18px;
    top:0;
    background-image: url('~@/assets/images/common_head_default.png');
    background-repeat: no-repeat;
    background-size:110px 40px;
    background-position: right 0 top 0;
  }
  .common_item{
    height:40px;
    min-width: 150px;
    font-size:22px;
    font-family:SourceHanSansSC-Bold,SourceHanSansSC;
    font-weight:bold;
    color:#BFE8FF;
    line-height:40px;
    position: relative;
    float:left;
    margin-right:-18px;
  }
  .common_item_title{
    position:relative;
    z-index: 2;
    padding-left:40px;
    padding-right:40px;
  }
  .common_item_bg_l{
    height:40px;
    width:18px;
    position:absolute;
    left:0px;
    top:0;
    z-index: 1;
  }
  .common_item_bg_c{
    height:40px;
    position:absolute;
    left:18px;
    right:18px;
    top:0;
    z-index: 1;
  }
  .common_item_bg_r{
    height:40px;
    width:18px;
    position:absolute;
    right:0px;
    top:0;
    z-index: 1;
  }
  .common_item:nth-child(1).active .common_item_title{
    padding-left:20px;
  }
  .common_item:nth-child(1).active .common_item_bg_l{
    background-image: url('~@/assets/images/common_head_a_l_l.png');
    background-repeat: no-repeat;
    background-size:18px 40px;
    background-position: right 0 top 0;
  }
  .common_item:nth-child(1).active .common_item_bg_c{
    background-image: url('~@/assets/images/common_head_a_l_c.png');
    background-repeat: no-repeat;
    background-size:100% 40px;
    background-position: 0 0;
  }
  .common_item:nth-child(1).active .common_item_bg_r{
    background-image: url('~@/assets/images/common_head_a_l_r.png');
    background-repeat: no-repeat;
    background-size:18px 40px;
    background-position: right 0 top 0;
  }

  .common_item.active .common_item_bg_l{
    background-image: url('~@/assets/images/common_head_a_c_l.png');
    background-repeat: no-repeat;
    background-size:18px 40px;
    background-position: right 0 top 0;
  }
  .common_item.active .common_item_bg_c{
    background-image: url('~@/assets/images/common_head_a_c_c.png');
    background-repeat: no-repeat;
    background-size:100% 40px;
    background-position: 0 0;
  }
  .common_item.active .common_item_bg_r{
    background-image: url('~@/assets/images/common_head_a_c_r.png');
    background-repeat: no-repeat;
    background-size:18px 40px;
    background-position: right 0 top 0;
  }
.page{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  overflow: hidden;
}
  .common_table_head{
    height:32px;
    line-height: 32px;
    font-size:18px;
    font-family:SourceHanSansSC-Bold,SourceHanSansSC;
    font-weight:bold;
    color:#BFE8FF;
    text-align: center;
  }
  .common_table_body{
    position:absolute;
    left:0;
    right:0;
    top:32px;
    bottom:0;
    overflow: hidden;
    text-align: center;
  }
  .common_table_body .common_row{
    font-size:14px;
    font-family:SourceHanSansSC-Normal,SourceHanSansSC;
    font-weight:800;
    color:#32FFB4;
    line-height:28px;
  }
  .common_table_body .common_row:hover{
    background:rgba(50,63,98,0.3)
  }
  .common_table_body .common_row:nth-child(even){
    background:rgba(50,63,98,0.2);
  }
/* 地图背景色 */
/* .bmView>div:nth-child(1){
  background-color: #08304A!important;
} */

/* 左侧动画 */
.goleft{
  left:-560px!important;
  /* animation:goleft 1s forwards;
  -webkit-animation:goleft 1s forwards;  */
}
.backleft{
  left:12px!important;
  /* animation:backleft 1s forwards;
  -webkit-animation:backleft 1s forwards;  */
}
/* 左侧弹框动画 */
.leftmodelgo{
   left:12px!important
}
.leftmodelback{
   left:-560px!important
}
/* @keyframes goleft
  {
    from {transform: translateX(0)}
    to {transform: translateX(-500px)}
  }
@keyframes backleft
  {
    from {transform: translateX(-500px)}
    to {transform: translateX(0)}
  } */
  /* 右侧电话 */
.goright{
  animation:goright 1s forwards;
  -webkit-animation:goright 1s forwards; /* Safari 和 Chrome */
}
.backright{
  animation:backright 1s forwards;
  -webkit-animation:backright 1s forwards; /* Safari 和 Chrome */
}
@keyframes goright
  {
    from {transform: translateX(0)}
    to {transform: translateX(500px)}
  }
@keyframes backright
  {
    from {transform: translateX(500px)}
    to {transform: translateX(0)}
  }
  .no_data{
    width: 100%;
    padding:20px 0;
    color: #BFE8FF;
    font-size: 16px;
    text-align: center;
  }
  .no_data_img{
    display: block;
    width: 200px;
    margin:0 auto;
    height: auto;
  }
  /* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url('./font/DS-DIGIT.TTF');
}
.d-roll-item>.d-roll-bar{
  font-family: "electronicFont";
}
body /deep/ .el-select-dropdown{
   background: #01204D!important;
   border:1px solid #1FB3FF!important;
}
body /deep/ .el-popper[x-placement^=bottom] .popper__arrow::after{
      border-bottom-color: #01204D;
}
body /deep/ .el-popper[x-placement^=bottom] .popper__arrow{
  border-bottom-color: #1FB3FF;
}
body /deep/ .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
      background-color: #1FB3FF;
      color: #fff;
}
body /deep/  .el-select-dropdown__item{
  color: #1FB3FF;
}
</style>
